<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" content="https://github.com/JiHong88" />
    <meta name="keywords" content="wysiwyg,editor,javascript,suneditor,wysiwyg eidtor,rich text editor,html editor,contenteditable,위지위그 에디터 웹에디터">
    <meta name="description" content="Pure javascript wysiwyg web editor" />
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6933506635175446" crossorigin="anonymous"></script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-W0R51STQTY"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-W0R51STQTY');
    </script>
    <title>SunEditor</title>
    <!-- sample css -->
    <link rel="stylesheet" href="../css/bootstrap.css" media="all">
    <link rel="stylesheet" href="../css/sample.css" media="all">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css">
    <!-- suneditor -->
    <link href="../../dist/css/suneditor.min.css" rel="stylesheet">
    <!-- codeMirror -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/addon/lint/lint.css">
    <!-- KaTeX -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">
    <style>
        .sun-editor-editable .__se__customClass, .sun-editor .__se__customClass {
            border: 1px solid #b1b1b1;
            padding: 4px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" aria-expanded="false" onclick="buttonToggle()">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../index.html" title="Suneditor"><b>SunEditor</b></a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="getting-started.html" title="Getting started">Getting started</a></li>
                <li><a href="examples.html" title="Examples">Examples</a></li>
                <li><a href="options.html" style="color:#fff;" title="Options">Options</a></li>
                <li><a href="customPlugins.html" title="CustomPlugins">CustomPlugins</a></li>
                <li><a href="document.html" title="Document">Document</a></li>
                <li class="badge">
                    <a href="https://www.paypal.me/jihong88?locale.x=en" target="_blank" title="PayPal Donate, Thanks"><img src="http://suneditor.com/docs/donate.png" class="donate-btn" alt="PayPal Donate" /></a>
                    <a href="https://github.com/JiHong88/SunEditor" target="_blank" title="Go to Github"><img alt="GitHub stars" src="https://img.shields.io/github/stars/jihong88/suneditor.svg?style=social"></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="content">
    <article class="markdown-body entry-content">
        <div style="background-color: #f3f3f3; padding: 4px 20px 20px 20px;">
            <h4 style="color: #b94a48;">--Value</h4>
            <label><input type="checkbox" id="strictMode" checked>&nbsp;&nbsp;strictMode&nbsp;&nbsp;&nbsp;</label><br><br>
            <label><input type="checkbox" id="strictHTMLValidation" checked>&nbsp;&nbsp;strictHTMLValidation&nbsp;&nbsp;&nbsp;</label><br><br>
            <label><input type="checkbox" id="defaultTag">&nbsp;&nbsp;defaultTag&nbsp;&nbsp;&nbsp;</label>
            <input type="text" id="defaultTag_value" placeholder="String ('p', 'div'..)"></input>
            <br><br>
            <label><input type="checkbox" id="textTags">&nbsp;&nbsp;textTags&nbsp;&nbsp;&nbsp;</label>
            <span>{</span><br>
            <span>&nbsp;&nbsp;bold: 'b',</span><br>
            <span>&nbsp;&nbsp;underline: 'u',</span><br>
            <span>&nbsp;&nbsp;italic: 'i',</span><br>
            <span>&nbsp;&nbsp;strike: 's'</span><br>
            <span>}</span>
            <br><br>
            <label><input type="checkbox" id="editor_value">&nbsp;&nbsp;value&nbsp;&nbsp;&nbsp;</label><br>
            <textarea id="editor_value_value" placeholder="HTML String ('&lt;p&gt;..&lt;/p&gt;')" style="width:320px"></textarea>
            <br><br>
            <label><input type="checkbox" id="editor_allowedClassNames">&nbsp;&nbsp;allowedClassNames&nbsp;&nbsp;&nbsp;</label><br>
            <input type="text" id="editor_value_allowedClassNames" placeholder="String(RegExp)" style="width:320px"></textarea>
            <br><br>
            <label><input type="checkbox" id="historyStackDelayTime">&nbsp;&nbsp;historyStackDelayTime&nbsp;&nbsp;&nbsp;</label>
            <input type="text" id="historyStackDelayTime_value" placeholder="Number (400)miliseconds">
            <br>
            <h4 style="color: #b94a48;">--Whitelist, Blacklist</h4>
            <label><input type="checkbox" id="addTagsWhitelist">&nbsp;&nbsp;addTagsWhitelist&nbsp;&nbsp;&nbsp;</label>
            <input type="text" id="addTagsWhitelist_value" placeholder="String (mark|canvas|label|select|option|input, *)" style="width:320px">
            <br><br>
            <label><input type="checkbox" id="pasteTagsWhitelist">&nbsp;&nbsp;pasteTagsWhitelist</label>
            <input type="text" id="pasteTagsWhitelist_value" placeholder="String (p|h1|h2|h3, *)" style="width:320px">
            <br><br>
            <label><input type="checkbox" id="tagsBlacklist">&nbsp;&nbsp;tagsBlacklist</label>
            <input type="text" id="tagsBlacklist_value" placeholder="String (h1|h2)" style="width:320px">
            <br><br>
            <label><input type="checkbox" id="pasteTagsBlacklist">&nbsp;&nbsp;pasteTagsBlacklist</label>
            <input type="text" id="pasteTagsBlacklist_value" placeholder="String (h1|h2)" style="width:320px">
            <br><br>
            <label><input type="checkbox" id="attributesWhitelist">&nbsp;&nbsp;attributesWhitelist</label><br>
            <span>{</span><br>
            <span>&nbsp;&nbsp;all: 'style',</span><br>
            <span>&nbsp;&nbsp;input: 'checked'</span><br>
            <span>}</span>
            <br><br>
            <label><input type="checkbox" id="attributesBlacklist">&nbsp;&nbsp;attributesBlacklist</label><br>
            <span>{</span><br>
            <span>&nbsp;&nbsp;all: 'data-test',</span><br>
            <span>&nbsp;&nbsp;input: 'name'</span><br>
            <span>}</span>
            <br>
            
            <h4 style="color: #b94a48;">--Layout</h4>
            <label>mode&nbsp;&nbsp;</label>
            <select id="mode">
                <option value="classic" selected>Classic</option>
                <option value="inline">Inline</option>
                <option value="balloon">Balloon</option>
                <option value="balloon-always">Balloon-always</option>
            </select>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label>Language&nbsp;&nbsp;</label>
            <select id="language">
                <option value="ckb">ckb</option>
                <option value="cs">cs</option>
                <option value="da">da</option>
                <option value="de">de</option>
                <option value="en" selected>en</option>
                <option value="es">es</option>
                <option value="fr">fr</option>
                <option value="he">he</option>
                <option value="hu">hu</option>
                <option value="it">it</option>
                <option value="ja">ja</option>
                <option value="ko">ko</option>s
                <option value="lv">lv</option>
                <option value="nl">nl</option>
                <option value="pl">pl</option>
                <option value="pt_br">pt_br</option>
                <option value="ro">ro</option>
                <option value="ru">ru</option>
                <option value="se">se</option>
                <option value="ua">ua</option>
                <option value="ur">ur</option>
                <option value="zh_cn">zh_cn</option>
            </select>
            <br><br>
            <label><input type="checkbox" id="rtl">&nbsp;&nbsp;rtl (Right To Left)</label>
            <br><br>
            <label><input type="checkbox" id="lineAttrReset">&nbsp;&nbsp;lineAttrReset</label>
            <input type="text" id="lineAttrReset_value" placeholder="style|class , *">
            <br><br>
            <label><input type="checkbox" id="toolbarWidth">&nbsp;&nbsp;toolbarWidth</label>
            <input type="text" id="toolbarWidth_value" placeholder="Number, ...px, ...%">
            <br><br>
            <label><input type="checkbox" id="toolbarContainer">&nbsp;&nbsp;toolbarContainer</label> "#custom_toolbar"
            <br><br>
            <label><input type="checkbox" id="stickyToolbar">&nbsp;&nbsp;stickyToolbar</label>
            <input type="text" id="stickyToolbar_value" placeholder="Number, ...px">
            <br><br>
            <label><input type="checkbox" id="hideToolbar">&nbsp;&nbsp;hideToolbar</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br><br>
            <label><input type="checkbox" id="fullScreenOffset">&nbsp;&nbsp;fullScreenOffset</label>
            <input type="text" id="fullScreenOffset_value" placeholder="Number, ...px">
            <br><br>
            <label><input type="checkbox" id="iframe">&nbsp;&nbsp;iframe</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="fullPage">&nbsp;&nbsp;fullPage</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="iframeAttributes">&nbsp;&nbsp;iframeAttributes</label>
            <span>{</span><br>
            <span>&nbsp;&nbsp;scrolling: 'no',</span><br>
            <span>}</span>
            <br><br>
            <label><input type="checkbox" id="iframeCSSFileName">&nbsp;&nbsp;iframeCSSFileName</label>
            <input type="text" id="iframeCSSFileName_value" placeholder="String (suneditor)">
            <br><br>
            <label><input type="checkbox" id="previewTemplate">&nbsp;&nbsp;previewTemplate</label><br>
            <textarea id="previewTemplate_value" placeholder='&lt;h1&gt;Preview&lt;/h1&gt; {{contents}} &lt;div&gt;_Footer_&lt;/div&gt;' style="width: 420px; height: 130px; vertical-align: top;">
<div style='width:auto; max-width:1080px; margin:auto;'>
    <h1>Preview Template</h1> 
    {{contents}} 
    <div>_Footer_</div>
</div>
            </textarea>
            <br><br>
            <label><input type="checkbox" id="printTemplate">&nbsp;&nbsp;printTemplate</label><br>
            <textarea id="printTemplate_value" placeholder='&lt;h1&gt;Print&lt;/h1&gt; {{contents}} &lt;div&gt;_Footer_&lt;/div&gt;' style="width: 420px; height: 130px; vertical-align: top;">
<div style='width:auto; max-width:1080px; margin:auto;'>
    <h1>Print Template</h1> 
    {{contents}} 
    <div>_Footer_</div>
</div>
            </textarea>
            <br><br>
            <label><input type="checkbox" id="codeMirror">&nbsp;&nbsp;codeMirror</label> { codeMirror: CodeMirror }<br>
            <label><input type="checkbox" id="katex" checked disabled>&nbsp;&nbsp;katex</label> { katex: katex } // Use "math" plugin<br>
            <label><input type="checkbox" id="mathFontSize">&nbsp;&nbsp;mathFontSize</label>
            <span>[</span><br>
            <span>&nbsp;&nbsp;{text: '1', value: '1em'},</span><br>
            <span>&nbsp;&nbsp;{text: '2', value: '2em', default: true}</span><br>
            <span>]</span>
            <br><br>

            <br>
            <h4 style="color: #b94a48;">--Display</h4>
            <label><input type="checkbox" id="position">&nbsp;&nbsp;position</label>
            <input type="text" id="position_value" placeholder="static, relative, etc.">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="display">&nbsp;&nbsp;display</label>
            <input type="text" id="display_value" placeholder="block, inline, etc.">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="popupDisplay">&nbsp;&nbsp;popupDisplay</label>
            <input type="text" id="popupDisplay_value" placeholder="full, local">

            <br>
            <h4 style="color: #b94a48;">--Bottom resizing bar</h4>
            <label><input type="checkbox" id="resizingBar" checked>&nbsp;&nbsp;resizingBar</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="showPathLabel" checked>&nbsp;&nbsp;showPathLabel</label>
            <label><input type="checkbox" id="resizeEnable" checked>&nbsp;&nbsp;resizeEnable</label>
            <label><input type="checkbox" id="resizingBarContainer">&nbsp;&nbsp;resizingBarContainer</label> "#custom_bottombar"
            
            <br>
            <h4 style="color: #b94a48;">--Character count</h4>
            <label><input type="checkbox" id="charCounter">&nbsp;&nbsp;charCounter</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="maxCharCount">&nbsp;&nbsp;maxCharCount</label>
            <input type="text" id="maxCharCount_value" placeholder="Number">
            <br><br>
            <label><input type="checkbox" id="charCounterType">&nbsp;&nbsp;charCounterType</label>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="radio" id="radio_charCounterType_1" name="radio_charCounterType" value="char" checked>&nbsp;&nbsp;char</label>
            &nbsp;&nbsp;&nbsp;
            <label><input type="radio" id="radio_charCounterType_2" name="radio_charCounterType" value="byte">&nbsp;&nbsp;byte</label>
            &nbsp;&nbsp;&nbsp;
            <label><input type="radio" id="radio_charCounterType_3" name="radio_charCounterType" value="byte-html">&nbsp;&nbsp;byte-html</label>
            <br><br>
            <label><input type="checkbox" id="charCounterLabel">&nbsp;&nbsp;charCounterLabel</label>
            <input type="text" id="charCounterLabel_value" placeholder="String">

            <br>
            <h4 style="color: #b94a48;">--Size</h4>
            <label><input type="checkbox" id="width">&nbsp;&nbsp;width</label>
            <input type="text" id="width_value" placeholder="Number, auto, ..style">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="minWidth">&nbsp;&nbsp;minWidth</label>
            <input type="text" id="minWidth_value" placeholder="Number, ..style">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="maxWidth">&nbsp;&nbsp;maxWidth</label>
            <input type="text" id="maxWidth_value" placeholder="Number, ..style">
            <br><br>
            <label><input type="checkbox" id="height">&nbsp;&nbsp;height</label>
            <input type="text" id="height_value" placeholder="Number, auto, ..style">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="minHeight">&nbsp;&nbsp;minHeight</label>
            <input type="text" id="minHeight_value" placeholder="Number, ..style">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="maxHeight">&nbsp;&nbsp;maxHeight</label>
            <input type="text" id="maxHeight_value" placeholder="Number, ..style">

            <br>
            <h4 style="color: #b94a48;">--Editing area</h4>
            <label><input type="checkbox" id="className">&nbsp;&nbsp;className</label>
            <input type="text" id="className_value" placeholder="String" style="width:320px">
            <br><br>
            <label><input type="checkbox" id="defaultStyle">&nbsp;&nbsp;defaultStyle</label>
            <input type="text" id="defaultStyle_value" placeholder="String (font-family: cursive; font-size: 10px;)" style="width:320px">

            <br>
            <h4 style="color: #b94a48;">--Defining menu items</h4>
            <label><input type="checkbox" id="font">&nbsp;&nbsp;font</label>
            <span>[ 'Arial', 'tahoma', 'Courier New,Courier' ]</span>
            <br><br>
            <label><input type="checkbox" id="fontSize">&nbsp;&nbsp;fontSize</label>
            <span>[ 8, 10, 14, 18, 24, 36 ]</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="fontSizeUnit">&nbsp;&nbsp;fontSizeUnit</label>
            <input type="text" id="fontSizeUnit_value" placeholder="String">
            <br><br>
            <label><input type="checkbox" id="alignItems">&nbsp;&nbsp;alignItems</label>
            <span><a href="#rtl">rtl</a> === true ? ['right', 'center', 'left', 'justify'] : ['left', 'center', 'right', 'justify']</span>
            <br><br>
            <label><input type="checkbox" id="formats">&nbsp;&nbsp;formats</label>
            <span>['p', 'blockquote', 'h1', 'h2', 'h3']</span>
            <br><br>
            <label><input type="checkbox" id="colorList">&nbsp;&nbsp;colorList</label>
            <span>[ ['#ff0000', '#ff5e00', '#ffe400', '#abf200'], ['#00d8ff', '#0055ff', '#6600ff', '#ff00dd'] ]</span>
            <br><br>
            <label><input type="checkbox" id="lineHeights">&nbsp;&nbsp;lineHeights</label><br>
            <span>[</span><br>
            <span>&nbsp;&nbsp;{text: 'Single', value: 1},</span><br>
            <span>&nbsp;&nbsp;{text: 'Double', value: 2}</span><br>
            <span>]</span>
            <br><br>
            <label><input type="checkbox" id="paragraphStyles">&nbsp;&nbsp;paragraphStyles</label><br>
            <span>[</span><br>
            <span>&nbsp;&nbsp;'spaced',</span><br>
            <span>&nbsp;&nbsp;{name: 'Box', class: '__se__customClass'}</span><br>
            <span>]</span>
            <br><br>
            <label><input type="checkbox" id="textStyles">&nbsp;&nbsp;textStyles</label><br>
            <span>[</span><br>
            <span>&nbsp;&nbsp;'translucent',</span><br>
            <span>&nbsp;&nbsp;{name: 'Emphasis', style: '-webkit-text-emphasis: filled;', tag: 'span'}</span><br>
            <span>]</span>

            <br>
            <h4 style="color: #b94a48;">--Image</h4>
            <label><input type="checkbox" id="imageResizing" checked>&nbsp;&nbsp;imageResizing</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="imageFileInput" checked>&nbsp;&nbsp;imageFileInput</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="imageUrlInput" checked>&nbsp;&nbsp;imageUrlInput</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="imageHeightShow" checked>&nbsp;&nbsp;imageHeightShow</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="imageAlignShow" checked>&nbsp;&nbsp;imageAlignShow</label>
            <br><br>
            <label><input type="checkbox" id="imageWidth">&nbsp;&nbsp;imageWidth</label>
            <input type="text" id="imageWidth_value" placeholder="String.. (auto)" style="width: 200px">
            <br><br>
            <label><input type="checkbox" id="imageHeight">&nbsp;&nbsp;imageHeight</label>
            <input type="text" id="imageHeight_value" placeholder="String.. (auto)" style="width: 200px">
            <br><br>
            <label><input type="checkbox" id="imageSizeOnlyPercentage">&nbsp;&nbsp;imageSizeOnlyPercentage</label>
            <br><br>
            <label><input type="checkbox" id="imageRotation">&nbsp;&nbsp;imageRotation</label>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="radio" id="radio_imageRotation_1" name="radio_imageRotation" value="px" checked>&nbsp;&nbsp;true</label>
            &nbsp;&nbsp;&nbsp;
            <label><input type="radio" id="radio_imageRotation_2" name="radio_imageRotation" value="%">&nbsp;&nbsp;false</label>
            <br><br>
            <label><input type="checkbox" id="imageUploadHeader">&nbsp;&nbsp;imageUploadHeader</label>
            <textarea id="imageUploadHeader_value" placeholder='{"xxx": "xxx"}' style="width: 300px; vertical-align: top;"></textarea>
            <br><br>
            <label><input type="checkbox" id="imageUploadUrl">&nbsp;&nbsp;imageUploadUrl</label>
            <input type="text" id="imageUploadUrl_value" placeholder="Server upload URL" style="width: 200px">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="imageUploadSizeLimit">&nbsp;&nbsp;imageUploadSizeLimit</label>
            <input type="text" id="imageUploadSizeLimit_value" placeholder="Number(Byte)" style="width: 200px">
            <br><br>
            <label><input type="checkbox" id="imageMultipleFile">&nbsp;&nbsp;imageMultipleFile</label>
            <br><br>
            <label><input type="checkbox" id="imageAccept">&nbsp;&nbsp;imageAccept</label>
            <input type="text" id="imageAccept_value" placeholder='String( * or .jpg, .png...)'>
            <br>
            <h4 style="color: #b94a48;">--image gallery</h4>
            <label><input type="checkbox" id="imageGalleryData">&nbsp;&nbsp;imageGalleryData</label><br>
            <textarea type="text" id="imageGalleryData_value" placeholder="Array" style="width: 300px; height: 120px;">
[
        {
            "src": "http://suneditor.com/docs/cat.jpg",
            "name": "Tabby",
            "alt": "Tabby",
            "tag": "Cat"
        },
        {
            "src": "http://suneditor.com/docs/cat1.jpg",
            "name": "Cat paw",
            "alt": "Cat paw",
            "tag": "Cat"
        },
        {
            "src": "http://suneditor.com/docs/cat2.jpg",
            "name": "Cat",
            "alt": "Cat",
            "tag": "Cat"
        }
]
            </textarea>
            <br><br>
            <label><input type="checkbox" id="imageGalleryUrl" checked>&nbsp;&nbsp;imageGalleryUrl</label>
            <input type="text" id="imageGalleryUrl_value" placeholder="String(URL address)" style="width: 200px" value="https://etyswjpn79.execute-api.ap-northeast-1.amazonaws.com/suneditor-demo">
            <label><input type="checkbox" id="imageGalleryHeader">&nbsp;&nbsp;imageGalleryHeader</label>
            <textarea id="imageGalleryHeader_value" placeholder='{"xxx": "xxx"}' style="width: 300px; vertical-align: top;"></textarea>

            <br>
            <h4 style="color: #b94a48;">--Video</h4>
            <label><input type="checkbox" id="videoResizing" checked>&nbsp;&nbsp;videoResizing</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="videoFileInput">&nbsp;&nbsp;videoFileInput</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="videoUrlInput" checked>&nbsp;&nbsp;videoUrlInput</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="videoHeightShow" checked>&nbsp;&nbsp;videoHeightShow</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="videoAlignShow" checked>&nbsp;&nbsp;videoAlignShow</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="videoRatioShow" checked>&nbsp;&nbsp;videoRatioShow</label>
            <br><br>
            <label><input type="checkbox" id="videoWidth">&nbsp;&nbsp;videoWidth</label>
            <input type="text" id="videoWidth_value" placeholder="String.. (100%)">
            <br><br>
            <label><input type="checkbox" id="videoHeight">&nbsp;&nbsp;videoHeight</label>
            <input type="text" id="videoHeight_value" placeholder="String.. (56.25%)">
            <br><br>
            <label><input type="checkbox" id="videoSizeOnlyPercentage">&nbsp;&nbsp;videoSizeOnlyPercentage</label>
            <br><br>
            <label><input type="checkbox" id="videoRotation">&nbsp;&nbsp;videoRotation</label>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="radio" id="radio_videoRotation_1" name="radio_videoRotation" value="px" checked>&nbsp;&nbsp;true</label>
            &nbsp;&nbsp;&nbsp;
            <label><input type="radio" id="radio_videoRotation_2" name="radio_videoRotation" value="%">&nbsp;&nbsp;false</label>
            <br><br>
            <label><input type="checkbox" id="videoRatio">&nbsp;&nbsp;videoRatio</label>
            <input type="text" id="videoRatio_value" placeholder="Float.. (0.5625)">
            <br><br>
            <label><input type="checkbox" id="videoRatioList">&nbsp;&nbsp;videoRatioList</label>
            <span>[ {name: 'Classic Film 3:2', value: 0.6666}, {name: 'HD', value: 0.5625} ]</span>
            <br><br>
            <label><input type="checkbox" id="youtubeQuery">&nbsp;&nbsp;youtubeQuery</label>
            <input type="text" id="youtubeQuery_value" placeholder="String.. (autoplay=1&mute=1)" style="width:220px">
            <br><br>
            <label><input type="checkbox" id="videoUploadHeader">&nbsp;&nbsp;videoUploadHeader</label>
            <textarea id="videoUploadHeader_value" placeholder='{"xxx": "xxx"}' style="width: 300px; vertical-align: top;"></textarea>
            <br><br>
            <label><input type="checkbox" id="videoUploadUrl">&nbsp;&nbsp;videoUploadUrl</label>
            <input type="text" id="videoUploadUrl_value" placeholder="Server upload URL" style="width: 200px">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="videoUploadSizeLimit">&nbsp;&nbsp;videoUploadSizeLimit</label>
            <input type="text" id="videoUploadSizeLimit_value" placeholder="Number(Byte)" style="width: 200px">
            <br><br>
            <label><input type="checkbox" id="videoMultipleFile">&nbsp;&nbsp;videoMultipleFile</label>
            <br><br>
            <label><input type="checkbox" id="videoTagAttrs">&nbsp;&nbsp;videoTagAttrs&nbsp; &nbsp; &nbsp; </label>
            <textarea type="text" id="videoTagAttrs_value" placeholder='{"poster": "http://suneditor.com/docs/loading.gif", "autoplay": "true"}' style="width: 300px; height: 100px;; vertical-align: top;"></textarea>
            <br><br>
            <label><input type="checkbox" id="videoIframeAttrs">&nbsp;&nbsp;videoIframeAttrs</label>
            <textarea type="text" id="videoIframeAttrs_value" placeholder='{"style": "border: 2px solid red;"}' style="width: 300px; height: 100px;; vertical-align: top;"></textarea>
            <br><br>
            <label><input type="checkbox" id="videoAccept">&nbsp;&nbsp;videoAccept</label>
            <input type="text" id="videoAccept_value" placeholder='String( * or .mp4, .avi...)'>

            <br>
            <h4 style="color: #b94a48;">--Audio</h4>
            <label><input type="checkbox" id="audioFileInput">&nbsp;&nbsp;audioFileInput</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="audioUrlInput" checked>&nbsp;&nbsp;audioUrlInput</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br><br>
            <label><input type="checkbox" id="audioWidth">&nbsp;&nbsp;audioWidth</label>
            <input type="text" id="audioWidth_value" placeholder="String.. (300px)">
            <br><br>
            <label><input type="checkbox" id="audioHeight">&nbsp;&nbsp;audioHeight</label>
            <input type="text" id="audioHeight_value" placeholder="String.. (54px)">
            <br><br>
            <label><input type="checkbox" id="audioUploadHeader">&nbsp;&nbsp;audioUploadHeader</label>
            <textarea id="audioUploadHeader_value" placeholder='{"xxx": "xxx"}' style="width: 300px; vertical-align: top;"></textarea>
            <br><br>
            <label><input type="checkbox" id="audioUploadUrl">&nbsp;&nbsp;audioUploadUrl</label>
            <input type="text" id="audioUploadUrl_value" placeholder="Server upload URL" style="width: 200px">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" id="audioUploadSizeLimit">&nbsp;&nbsp;audioUploadSizeLimit</label>
            <input type="text" id="audioUploadSizeLimit_value" placeholder="Number(Byte)" style="width: 200px">
            <br><br>
            <label><input type="checkbox" id="audioMultipleFile">&nbsp;&nbsp;audioMultipleFile</label>
            <br><br>
            <label><input type="checkbox" id="audioTagAttrs">&nbsp;&nbsp;audioTagAttrs</label>
            <textarea type="text" id="audioTagAttrs_value" placeholder='{"controlslist": "nodownload", "autoplay": "true"}' style="width: 300px; height: 100px;; vertical-align: top;"></textarea>
            <br><br>
            <label><input type="checkbox" id="audioAccept">&nbsp;&nbsp;audioAccept</label>
            <input type="text" id="audioAccept_value" placeholder='String( * or .mp3, .wav...)'>

            <br>
            <h4 style="color: #b94a48;">--Table</h4>
            <label><input type="checkbox" id="tableCellControllerPosition">&nbsp;&nbsp;tableCellControllerPosition</label>
            <input type="text" id="tableCellControllerPosition_value" placeholder="String.. (cell, top)">

            <br>
            <h4 style="color: #b94a48;">--Link</h4>
            <label><input type="checkbox" id="linkTargetNewWindow">&nbsp;&nbsp;linkTargetNewWindow</label>
            <br><br>
            <label><input type="checkbox" id="linkProtocol">&nbsp;&nbsp;linkProtocol</label>
            <input type="text" id="linkProtocol_value" placeholder="https://" style="width: 200px">
            <br><br>
            <label><input type="checkbox" id="linkRel">&nbsp;&nbsp;linkRel</label>
            <br>
            <span>[</span>
            <span>&nbsp;'author',</span>
            <span>&nbsp;'external',</span>
            <span>&nbsp;'help',</span>
            <span>&nbsp;'license',</span>
            <span>&nbsp;'next',</span>
            <span>&nbsp;'follow',</span>
            <span>&nbsp;'nofollow',</span>
            <span>&nbsp;'noreferrer',</span>
            <span>&nbsp;'noopener',</span>
            <span>&nbsp;'prev',</span>
            <span>&nbsp;'search',</span>
            <span>&nbsp;'tag'</span>
            <span>]</span>
            <br><br>
            <label><input type="checkbox" id="linkRelDefault">&nbsp;&nbsp;linkRelDefault</label>
            <br>
            <span>{</span>
            <span>&nbsp;default: 'nofollow',</span>
            <span>&nbsp;check_new_window: 'noreferrer noopener',</span>
            <span>&nbsp;check_bookmark: 'bookmark'</span>
            <span>}</span>
            <br><br>
            <label><input type="checkbox" id="linkNoPrefix">&nbsp;&nbsp;linkNoPrefix</label>

            <br>
            <h4 style="color: #b94a48;">--HR</h4>
            <label><input type="checkbox" id="hrItems">&nbsp;&nbsp;hrItems</label>
            <span>[ {name: "Outset", style: "border-style: outset;"} ]</span>
            
            <br>
            <h4 style="color: #b94a48;">--Key actions</h4>
            <label><input type="checkbox" id="tabDisable">&nbsp;&nbsp;tabDisable</label><br>
            <label><input type="checkbox" id="shortcutsDisable">&nbsp;&nbsp;shortcutsDisable</label> ['bold', 'strike', 'underline', 'italic', 'undo', 'indent']<br>
            <label><input type="checkbox" id="shortcutsHint" checked>&nbsp;&nbsp;shortcutsHint</label><br>

            <h4 style="color: #b94a48;">--Defining save button</h4>
            <label><input type="checkbox" id="callBackSave">&nbsp;&nbsp;callBackSave</label><br>
            <span>function (contents) { alert(contents) }</span>
            
            <br>
            <h4 style="color: #b94a48;">--Templates Array</h4>
            <label><input type="checkbox" id="templates">&nbsp;&nbsp;templates</label><br>
            <span>[</span><br>
            <span>&nbsp;&nbsp;{</span><br>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;name: 'Template-1',</span><br>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;html: '&lt;p&gt;HTML source1&lt;/p&gt;'</span><br>
            <span>&nbsp;&nbsp;},</span><br>
            <span>&nbsp;&nbsp;{</span><br>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;name: 'Template-2',</span><br>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;html: '&lt;p&gt;HTML source2&lt;/p&gt;'</span><br>
            <span>&nbsp;&nbsp;}</span><br>
            <span>]</span>

            <br>
            <h4 style="color: #b94a48;">--ETC</h4>
            <label><input type="checkbox" id="placeholder">&nbsp;&nbsp;placeholder</label>
            <input type="text" id="placeholder_value" placeholder="String" style="width: 200px">
            <br><br>
            <label><input type="checkbox" id="mediaAutoSelect" checked>&nbsp;&nbsp;mediaAutoSelect</label>
            <br><br>
            <label><input type="checkbox" id="icons">&nbsp;&nbsp;icons</label><br>
            <span>{</span><br>
            <span>&nbsp;&nbsp;paragraph_style: '&lt;svg&gt;&lt;path d=".."/&gt;&lt;/svg&gt;'</span><br>
            <span>}</span>
        </div>
        <br>
        
        <button type="button" class="btn btn-md btn-primary" onclick="sun_create()">Create</button>
        <textarea id="sample_editor" style="display: none;"><h1>Insert into..</h1></textarea>
        <div id="custom_toolbar" class="sun-editor" style="margin-top: 20px;"></div>

        <div class="component-list">
            <div class="file-list-info">
                <span>Attached files</span>
                <span class="xefu-btn">
                    <span class="files-text">Attach image</span>
                </span>
                <input type="file" id="files_upload" accept="image/*" multiple="multiple" class="files-text files-input" />
                <span id="image_size" class="total-size text-small-2">0KB</span>
                <button class="btn btn-md btn-danger" id="image_remove" disabled onclick="deleteCheckedImages()">Remove</button>
            </div>
            <div class="file-list">
                <ul id="image_list">
                </ul>
            </div>
        </div>

        <div id="custom_bottombar" class="sun-editor" style="margin-top: 20px;"></div>

        <h2 class="sub-title">Applied options</h2>
        <div class="highlight highlight-source-js"><pre><span class="pl-en">console</span>.<span class="pl-smi">log</span>.<span class="pl-c1">apply</span>(<span class="pl-en">console</span>, options);</pre></div>
        <div style="background-color: #f3f3f3;">
            <textarea id="option_display"></textarea>
        </div>
    </article>

    <footer>
        <p>SunEditor distributed under the MIT license.</p>
        <p><a href="https://github.com/JiHong88/SunEditor" target="_blank" style="color:#f4b124;">Go to GitHub SunEditor</a></p>
    </footer>
</div>

<script src="../js/common.js"></script>
<!-- suneditor -->
<script src="../../dist/suneditor.min.js"></script>
<!-- codeMirror -->
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/xml/xml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/css/css.js"></script>
<!-- code mirror options display -->
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/addon/edit/matchbrackets.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/addon/edit/closebrackets.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/addon/lint/lint.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/addon/lint/json-lint.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/javascript/javascript.js"></script>
<!-- KaTeX -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
<style>
.CodeMirror {
    font-family: monospace;
    font-size: 13px;
}
</style>
<!-- languages -->
<script src="../../src/lang/ckb.js"></script>
<script src="../../src/lang/cs.js"></script>
<script src="../../src/lang/da.js"></script>
<script src="../../src/lang/de.js"></script>
<script src="../../src/lang/en.js"></script>
<script src="../../src/lang/es.js"></script>
<script src="../../src/lang/fr.js"></script>
<script src="../../src/lang/he.js"></script>
<script src="../../src/lang/hu.js"></script>
<script src="../../src/lang/it.js"></script>
<script src="../../src/lang/ja.js"></script>
<script src="../../src/lang/ko.js"></script>
<script src="../../src/lang/lv.js"></script>
<script src="../../src/lang/nl.js"></script>
<script src="../../src/lang/pl.js"></script>
<script src="../../src/lang/pt_br.js"></script>
<script src="../../src/lang/ro.js"></script>
<script src="../../src/lang/ru.js"></script>
<script src="../../src/lang/se.js"></script>
<script src="../../src/lang/ua.js"></script>
<script src="../../src/lang/ur.js"></script>
<script src="../../src/lang/zh_cn.js"></script>

<script>
var langSelect = document.getElementById('language');
var modeSelect = document.getElementById('mode');

var optionDisplay = CodeMirror.fromTextArea(document.getElementById('option_display'), {
    mode: 'application/ld+json',
    lineNumbers: true,
    lineWrapping: false,
    autoCloseBrackets: true,
    matchbrackets: true,
    readOnly: true
});
optionDisplay.setSize('100%', '500px');

function sun_create () {
    if (editorImageSample && editorImageSample.destroy) editorImageSample.destroy();

    imageTable.innerHTML = '';

    var options = {
        strictMode: document.getElementById('strictMode').checked ? undefined : false,
        strictHTMLValidation: document.getElementById('strictHTMLValidation').checked ? undefined : false,
        defaultTag: document.getElementById('defaultTag').checked ? document.getElementById('defaultTag_value').value : undefined,
        textTags: document.getElementById('textTags').checked ? {
            bold: 'b',
            underline: 'u',
            italic: 'i',
            strike: 's'
        } : undefined,
        value: document.getElementById('editor_value').checked ? document.getElementById('editor_value_value').value : undefined,
        allowedClassNames: document.getElementById('editor_allowedClassNames').checked ? document.getElementById('editor_value_allowedClassNames').value : undefined,
        historyStackDelayTime: document.getElementById('historyStackDelayTime').checked ? document.getElementById('historyStackDelayTime_value').value * 1 : undefined,
        addTagsWhitelist: document.getElementById('addTagsWhitelist').checked ? document.getElementById('addTagsWhitelist_value').value : undefined,
        pasteTagsWhitelist: document.getElementById('pasteTagsWhitelist').checked ? document.getElementById('pasteTagsWhitelist_value').value : undefined,
        tagsBlacklist: document.getElementById('tagsBlacklist').checked ? document.getElementById('tagsBlacklist_value').value : undefined,
        pasteTagsBlacklist: document.getElementById('pasteTagsBlacklist').checked ? document.getElementById('pasteTagsBlacklist_value').value : undefined,
        attributesWhitelist: !document.getElementById('attributesWhitelist').checked ? undefined : {
            'all': 'style',
            'input': 'checked'
        },
        attributesBlacklist: !document.getElementById('attributesBlacklist').checked ? undefined : {
            'all': 'data-test',
            'input': 'name'
        },
        mode: modeSelect.options[modeSelect.selectedIndex].value,
        rtl: document.getElementById('rtl').checked,
        lineAttrReset: document.getElementById('lineAttrReset').checked ? document.getElementById('lineAttrReset_value').value : undefined,
        toolbarWidth: document.getElementById('toolbarWidth').checked ? document.getElementById('toolbarWidth_value').value : undefined,
        toolbarContainer: document.getElementById('toolbarContainer').checked ? '#custom_toolbar' : undefined,
        stickyToolbar: document.getElementById('stickyToolbar').checked ? document.getElementById('stickyToolbar_value').value : undefined,
        hideToolbar: document.getElementById('hideToolbar').checked ? true : undefined,
        fullScreenOffset: document.getElementById('fullScreenOffset').checked ? document.getElementById('fullScreenOffset_value').value : undefined,
        iframe: document.getElementById('iframe').checked ? true : undefined,
        fullPage: document.getElementById('fullPage').checked? true : undefined,
        iframeAttributes: document.getElementById('iframeAttributes').checked ? {scrolling: 'no'} : undefined,
        iframeCSSFileName: document.getElementById('iframeCSSFileName').checked ? document.getElementById('iframeCSSFileName_value').value : undefined,
        previewTemplate: document.getElementById('previewTemplate').checked ? document.getElementById('previewTemplate_value').value.replace(/\n/g, '') : undefined,
        printTemplate: document.getElementById('printTemplate').checked ? document.getElementById('printTemplate_value').value.replace(/\n/g, '') : undefined,
        codeMirror: document.getElementById('codeMirror').checked ? CodeMirror : undefined,
        katex: katex,
        mathFontSize: document.getElementById('mathFontSize').checked ? [{text: '1', value: '1em'}, {text: '2', value: '2em', default: true}] : undefined,
        position: document.getElementById('position').checked ? document.getElementById('position_value').value : undefined,
        popupDisplay: document.getElementById('popupDisplay').checked ? document.getElementById('popupDisplay_value').value : undefined,
        resizingBar: document.getElementById('resizingBar').checked ? undefined : false,
        showPathLabel: document.getElementById('showPathLabel').checked ? undefined : false,
        resizeEnable: document.getElementById('resizeEnable').checked ? undefined : false,
        resizingBarContainer: document.getElementById('resizingBarContainer').checked ? '#custom_bottombar' : undefined,
        charCounter: document.getElementById('charCounter').checked ? true : undefined,
        charCounterType: document.getElementById('charCounterType').checked ? (document.querySelector('input[name="radio_charCounterType"]:checked').value) : undefined,
        charCounterLabel: document.getElementById('charCounterLabel').checked ? document.getElementById('charCounterLabel_value').value : undefined,
        maxCharCount: document.getElementById('maxCharCount').checked ? document.getElementById('maxCharCount_value').value : undefined,
        display: document.getElementById('display').checked ? document.getElementById('display_value').value : undefined,
        width: document.getElementById('width').checked ? document.getElementById('width_value').value : undefined,
        minWidth: document.getElementById('minWidth').checked ? document.getElementById('minWidth_value').value : undefined,
        maxWidth: document.getElementById('maxWidth').checked ? document.getElementById('maxWidth_value').value : undefined,
        height: document.getElementById('height').checked ? document.getElementById('height_value').value : undefined,
        minHeight: document.getElementById('minHeight').checked ? document.getElementById('minHeight_value').value : undefined,
        maxHeight: document.getElementById('maxHeight').checked ? document.getElementById('maxHeight_value').value : undefined,
        className: document.getElementById('className').checked ? document.getElementById('className_value').value : undefined,
        defaultStyle: document.getElementById('defaultStyle').checked ? document.getElementById('defaultStyle_value').value : undefined,
        font: !document.getElementById('font').checked ? undefined : [
            'Arial',
            'tahoma',
            'Courier New,Courier'
        ],
        fontSize: !document.getElementById('fontSize').checked ? undefined : [
            8, 10, 14, 18, 24, 36
        ],
        fontSizeUnit: document.getElementById('fontSizeUnit').checked ? document.getElementById('fontSizeUnit_value').value : undefined,
        formats: !document.getElementById('formats').checked ? undefined : [
            'p', 'blockquote', 'h1', 'h2', 'h3'
        ],
        colorList: !document.getElementById('colorList').checked ? undefined : [
            ['#ff0000', '#ff5e00', '#ffe400', '#abf200'], ['#00d8ff', '#0055ff', '#6600ff', '#ff00dd']
        ],
        imageResizing: document.getElementById('imageResizing').checked ? undefined : false,
        imageHeightShow: document.getElementById('imageHeightShow').checked ? undefined : false,
        imageAlignShow: document.getElementById('imageAlignShow').checked ? undefined : false,
        imageFileInput: document.getElementById('imageFileInput').checked ? undefined : false,
        imageUrlInput: document.getElementById('imageUrlInput').checked ? undefined : false,
        imageWidth: document.getElementById('imageWidth').checked ? document.getElementById('imageWidth_value').value : undefined,
        imageHeight: document.getElementById('imageHeight').checked ? document.getElementById('imageHeight_value').value : undefined,
        imageSizeOnlyPercentage: document.getElementById('imageSizeOnlyPercentage').checked ? true : undefined,
        imageRotation: document.getElementById('imageRotation').checked ? document.getElementById('radio_imageRotation_1').checked : undefined,
        imageUploadHeader: document.getElementById('imageUploadHeader').checked ? JSON.parse(document.getElementById('imageUploadHeader_value').value) : undefined,
        imageUploadUrl: document.getElementById('imageUploadUrl').checked ? document.getElementById('imageUploadUrl_value').value : undefined,
        imageMultipleFile: document.getElementById('imageMultipleFile').checked ? true : undefined,
        imageUploadSizeLimit: document.getElementById('imageUploadSizeLimit').checked ? document.getElementById('imageUploadSizeLimit_value').value : undefined,
        imageAccept: document.getElementById('imageAccept').checked ? document.getElementById('imageAccept_value').value : undefined,
        imageGalleryData: document.getElementById('imageGalleryData').checked ? JSON.parse(document.getElementById('imageGalleryData_value').value) : undefined,
        imageGalleryUrl: document.getElementById('imageGalleryUrl').checked ? document.getElementById('imageGalleryUrl_value').value : undefined,
        imageGalleryHeader: document.getElementById('imageGalleryHeader').checked ? JSON.parse(document.getElementById('imageGalleryHeader_value').value) : undefined,
        videoResizing: document.getElementById('videoResizing').checked ? undefined : false,
        videoHeightShow: document.getElementById('videoHeightShow').checked ? undefined : false,
        videoAlignShow: document.getElementById('videoAlignShow').checked ? undefined : false,
        videoFileInput: document.getElementById('videoFileInput').checked ? true : false,
        videoUrlInput: document.getElementById('videoUrlInput').checked ? undefined : false,
        videoRatioShow: document.getElementById('videoRatioShow').checked ? undefined : false,
        videoWidth: document.getElementById('videoWidth').checked ? document.getElementById('videoWidth_value').value : undefined,
        videoHeight: document.getElementById('videoHeight').checked ? document.getElementById('videoHeight_value').value : undefined,
        videoSizeOnlyPercentage: document.getElementById('videoSizeOnlyPercentage').checked ? true : undefined,
        videoRotation: document.getElementById('videoRotation').checked ? document.getElementById('radio_videoRotation_1').checked : undefined,
        videoRatio: document.getElementById('videoRatio').checked ? document.getElementById('videoRatio_value').value : undefined,
        videoRatioList: !document.getElementById('videoRatioList').checked ? undefined : [
            {name: 'Classic Film 3:2', value: 0.6666}, {name: 'HD', value: 0.5625}
        ],
        youtubeQuery: document.getElementById('youtubeQuery').checked ? document.getElementById('youtubeQuery_value').value : undefined,
        videoUploadHeader: document.getElementById('videoUploadHeader').checked ? JSON.parse(document.getElementById('videoUploadHeader_value').value) : undefined,
        videoUploadUrl: document.getElementById('videoUploadUrl').checked ? document.getElementById('videoUploadUrl_value').value : undefined,
        videoMultipleFile: document.getElementById('videoMultipleFile').checked ? true : undefined,
        videoUploadSizeLimit: document.getElementById('videoUploadSizeLimit').checked ? document.getElementById('videoUploadSizeLimit_value').value : undefined,
        videoTagAttrs: document.getElementById('videoTagAttrs').checked ? JSON.parse(document.getElementById('videoTagAttrs_value').value) : undefined,
        videoIframeAttrs: document.getElementById('videoIframeAttrs').checked ? JSON.parse(document.getElementById('videoIframeAttrs_value').value) : undefined,
        videoAccept: document.getElementById('videoAccept').checked ? document.getElementById('videoAccept_value').value : undefined,
        audioFileInput: document.getElementById('audioFileInput').checked ? true : undefined,
        audioUrlInput: document.getElementById('audioUrlInput').checked ? undefined : false,
        audioWidth: document.getElementById('audioWidth').checked ? document.getElementById('audioWidth_value').value : undefined,
        audioHeight: document.getElementById('audioHeight').checked ? document.getElementById('audioHeight_value').value : undefined,
        audioUploadHeader: document.getElementById('audioUploadHeader').checked ? JSON.parse(document.getElementById('audioUploadHeader_value').value) : undefined,
        audioUploadUrl: document.getElementById('audioUploadUrl').checked ? document.getElementById('audioUploadUrl_value').value : undefined,
        audioMultipleFile: document.getElementById('audioMultipleFile').checked ? true : undefined,
        audioUploadSizeLimit: document.getElementById('audioUploadSizeLimit').checked ? document.getElementById('audioUploadSizeLimit_value').value : undefined,
        audioTagAttrs: document.getElementById('audioTagAttrs').checked ? JSON.parse(document.getElementById('audioTagAttrs_value').value) : undefined,
        audioAccept: document.getElementById('audioAccept').checked ? document.getElementById('audioAccept_value').value : undefined,
        tableCellControllerPosition: document.getElementById('tableCellControllerPosition').checked ? document.getElementById('tableCellControllerPosition_value').value : undefined,
        hrItems: document.getElementById('hrItems').checked ? [ {name: "Outset", style: "border-style: outset;"} ] : undefined,
        tabDisable: document.getElementById('tabDisable').checked,
        linkTargetNewWindow: document.getElementById('linkTargetNewWindow').checked ? true : undefined,
        linkProtocol: document.getElementById('linkProtocol').checked ? document.getElementById('linkProtocol_value').value : undefined,
        linkRel: document.getElementById('linkRel').checked ? ['author', 'external', 'help', 'license', 'next', 'follow', 'nofollow', 'noreferrer', 'noopener', 'prev', 'search', 'tag'] : undefined,
        linkRelDefault: document.getElementById('linkRelDefault').checked ? {default: 'nofollow', check_new_window: 'noreferrer noopener', check_bookmark: 'bookmark'} : undefined,
        linkNoPrefix: document.getElementById('linkNoPrefix').checked ? true : undefined,
        shortcutsDisable: document.getElementById('shortcutsDisable').checked ? ['bold', 'strike', 'underline', 'italic', 'undo', 'indent'] : undefined,
        shortcutsHint: document.getElementById('shortcutsHint').checked ? undefined : false,
        callBackSave: document.getElementById('callBackSave').checked ? function (contents) { alert(contents) } : undefined,
        lineHeights: document.getElementById('lineHeights').checked ? [{text: 'Single', value: 1}, {text: 'Double', value: 2}] : undefined,
        paragraphStyles: document.getElementById('paragraphStyles').checked ? ['spaced', {name: 'Box', class: '__se__customClass'}] : undefined,
        textStyles: document.getElementById('textStyles').checked ? ['translucent', {name: 'Emphasis', style: '-webkit-text-emphasis: filled;', tag: 'span'}] : undefined,
        templates: document.getElementById('templates').checked ? [{name: 'Template-1', html: '<p>HTML source1</p>'},{name: 'Template-2', html: '<p>HTML source2</p>'}] : undefined,
        placeholder: document.getElementById('placeholder').checked ? document.getElementById('placeholder_value').value : undefined,
        mediaAutoSelect: !document.getElementById('mediaAutoSelect').checked ? false : undefined,
        icons: document.getElementById('icons').checked ? { paragraph_style: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>' } : undefined,
        buttonList: [
            ['undo', 'redo',
            'font', 'fontSize', 'formatBlock',
            'paragraphStyle', 'blockquote',
            'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript',
            'fontColor', 'hiliteColor', 'textStyle',
            'removeFormat',
            'outdent', 'indent',
            'align', 'horizontalRule', 'list', 'lineHeight',
            'table', 'link', 'image', 'video', 'audio', 'math',
            'imageGallery',
            'fullScreen', 'showBlocks', 'codeView',
            'preview', 'print', 'save', 'template']
        ],
        lang: SUNEDITOR_LANG[langSelect.options[langSelect.selectedIndex].value]
    };
    
    editorImageSample = SUNEDITOR.create('sample_editor', options);
    editorImageSample.onImageUpload = imageUpload;

    // option string
    var languageCode = langSelect.options[langSelect.selectedIndex].value;
    var json = JSONstringify(options, languageCode);
    optionDisplay.setValue(json.replace(/\%c/g, '').replace(/"SUNEDITOR_LANG\..+"/, 'SUNEDITOR_LANG.' + languageCode));
}

sun_create();
</script>
</body>
</html>
